#set($layout = "/layout/default.vm")
<style>
    th{font-weight: normal}
    input{width:60%;height:26px;}
    select{width:60%;height:26px;}
    .la{text-align: right;width: 60px;}
</style>
<div class="col-xs-12">
    <h3></h3>
    <div class="col-md-3 no-padding">
        <div class="panel panel-default">
            <div class="panel-body" style="overflow: auto; min-height: 472px;">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div class="col-md-9 no-padding">
        <div class="panel panel-default">
            <div class="panel-body" style="overflow: auto; min-height: 472px;">
                <div class="form-inline">
                    <form id="userListForm" action="pageDemoList.htm" method="post">
                        <div class="col-md-12" style="padding:5px;">
                            <div class="col-md-3">
                                <label class="la">id</label>
                                <input id="id" name="id" type="text" value="$!{id}">
                            </div>
                            <div class="col-md-3">
                                <label class="la">名称</label>
                                <input id="goodsName" name="goodsName" type="text" value="$!{goodsName}">
                            </div>
                            <div class="col-md-3">
                                <label class="la">手机</label>
                                <input id="skuCode" name="skuCode" type="text" value="$!{skuCode}">
                            </div>
                            <div class="col-md-3">
                                <label class="la">电话</label>
                                <input id="goodsSpu" name="goodsSpu" type="text" value="$!{goodsSpu}">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <div id="GoodsSku-list_wrapper" class="dataTables_wrapper">
                        <div class="row">
                            <button class="btn btn-xs btn-primary" type="button" onclick="searchInfo();" style="margin:5px;">
                                <i class="icon-search bigger-500"></i> 查询
                            </button>
                            <button class="btn btn-xs btn-primary" target="navTab" onclick="javascript:umfclient.openTab('添加用户信息','$!{rc.contextPath}/user/addUser.htm')" style="margin:5px;"><i class="icon-plus bigger-500"></i> 新增</button>
                        </div>
                        <table id="GoodsSku-list" cellspacing="0" width="100%" class="nowrap table dataTable table-condensed table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th class="sorting_disabled">ID</th>
                                <th class="sorting_disabled">登录名称</th>
                                <th class="sorting_disabled">用户名称</th>
                                <th class="sorting_disabled">性别</th>
                                <th class="sorting_disabled">sku码</th>
                                <th class="sorting_disabled">唯一码</th>
                                <th class="sorting_disabled">电话</th>
                                <th class="sorting_disabled">手机</th>
                                <th class="sorting_disabled">状态</th>
                                <th width="100px;" class="sorting_disabled">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            #if($!userVOS.size() == 0)
                            <tr class="odd"><td valign="top" colspan="10" class="dataTables_empty">没有相关记录</td></tr>
                            #else
                            #set($i=1)
                            #foreach($!userVO in $!userVOS)
                            <tr ondblclick="searchDetail('$!userVO.id');">
                                <th>$!userVO.id</th>
                                <th>$!userVO.pid</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>$!userVO.name</th>
                                <th>
                                    <button onclick="searchDetail('$!userVO.id')" class='btn btn-xs btn-primary'><i class="icon-search bigger-500"></i>详情</button>
                                    <button onclick="editInfo('$!userVO.id');" class='btn btn-xs btn-primary'><i class="icon-edit bigger-500"></i>编辑</button>
                                    <button onclick='deleteInfo("$!userVO.id");' class='btn btn-xs btn-warning'><i class="icon-remove-sign bigger-500"></i>作废</button>
                                </th>
                            </tr>
                            #set($i=$i+1)
                            #end
                            #end
                            </tbody>
                        </table>
                        #parse("/include/pageFoot.vm")
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            key : {
                title : "name", //鼠标悬停显示的信息
                name : "name" //网页上显示出节点的名称
            },
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    return true;
                }
            }
        }
    };

    var zNodes =[];

    $(document).ready(function(){
        var t = $("#treeDemo");

        /**
         * zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)
         * t:用于展现 zTree 的 DOM 容器
         * setting:zTree 的配置数据
         * zNodes:zTree 的节点数据
         *
         */
        var param =null;
        $.ajax({
            type: "post",
            async: false,
            dataType: "json",
            url: '${rc.contextPath}/demo/ajaxDemoInfo.json',
            data: param,
            success: function (data) {
                zNodes = data ;
            }
        });

        t = $.fn.zTree.init(t, setting, zNodes);
    });




    // 分页
    paginator.init("userListForm");

    // 查询
    function searchInfo() {
        bootbox.alert("问百度去！");
    }

    // 查看详情
    function searchDetail() {
        bootbox.alert("哈哈，你想多了就是不给你看！");
    }

    // 编辑
    function editInfo() {
        bootbox.alert("哇，成功了耶！");
    }

    // 删除
    function deleteInfo() {
        bootbox.alert("想作废，那是不可能的！");
    }
</script>
